<style>
    .oem-paypemtcard-skeleton .form-row {
        display: flex;
        margin-bottom: 12px;
    }

    .oem-paypemtcard-skeleton .form-row-cell {
        flex: 1;
    }

    .oem-paypemtcard-skeleton .form-row-cell+.form-row-cell {
        margin-left: 12px;
    }

    .oem-paypemtcard-skeleton .input-label {
        display: block;
        font-size: 14px;
        color: #30313d;
        margin-bottom: 4px;
        text-align: left;
    }

    .oem-paypemtcard-skeleton .input {
        height: 44px;
        background-color: #fff;
        border-radius: 5px;
        border: 1px solid #e6e6e6;
        padding: 0 12px;
    }
    @media (max-width: 768px) {
        .mo-editor-reset table tr td{
            padding: 0 !important;
            box-sizing: border-box !important;
        }
    }
</style>

<style>
    .m-select-warp .m-select-warp-ul .m-select-warp-ul-li{
        justify-content: space-between;
    }
    .m-textarea-text textarea{
        height: 40px !important;
    }
    .m-form-item-label .m-form-item-text{
        font-weight: bold;
    }
</style>
<div style="text-align: left;margin-top: 10px;font-size: 12px;color: #4c4c4c;">
    <svg style="position: static;vertical-align: middle;" t="1701679681230" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7137" width="16" height="16"><path d="M484.010667 979.157333a562.304 562.304 0 0 1-385.152-534.229333V231.936a42.666667 42.666667 0 0 1 30.72-40.96l356.053333-103.893333A42.666667 42.666667 0 0 1 497.621333 85.333333a41.984 41.984 0 0 1 11.946667 1.749334l355.754667 103.893333a42.666667 42.666667 0 0 1 30.677333 40.96v213.077333a562.261333 562.261333 0 0 1-384.981333 534.144 42.666667 42.666667 0 0 1-13.482667 2.176 42.410667 42.410667 0 0 1-13.525333-2.176zM184.192 263.936v181.034667a477.098667 477.098667 0 0 0 313.301333 448.554666 477.056 477.056 0 0 0 313.130667-448.469333V263.978667l-313.045333-91.477334z m239.36 402.730667L282.026667 525.184a42.666667 42.666667 0 0 1 0-60.330667 42.666667 42.666667 0 0 1 60.373333 0l111.274667 111.274667 212.352-212.352a42.666667 42.666667 0 0 1 60.373333 0 42.666667 42.666667 0 0 1 0 60.373333l-242.517333 242.474667a42.666667 42.666667 0 0 1-30.208 12.501333 42.666667 42.666667 0 0 1-30.165334-12.458666z" fill="#25BB85" p-id="7138"></path></svg>
    <span style="margin-left: 5px;">asdasd</span>
</div>
<form class="checkout oem-paypemtcard-skeleton" id="tappaysdk" method="post" action="$payUrl">
    <div class="form-row">
        <div class="form-row-cell">
            <label class="input-label">Card Number <span class="required">*</span></label>
            <div class="input card-number"></div>
        </div>
    </div>

    <div class="form-row">
        <div class="form-row-cell">
            <label class="input-label">Expiration Date <span class="required">*</span></label>
            <div class="input expiration-date" id="tappay-expiration-date"></div>
        </div>
        <div class="form-row-cell">
            <label class="input-label">CVV <span class="required">*</span></label>
            <div class="input ccv"></div>
        </div>
    </div>
    <div id="tappaysdk-button"></div>
    <input id="grain_rain_pay_token" name="grain_rain_pay_token" type="hidden" value="" />
    <input id="grain_rain_t_ext_data" name="grain_rain_ext_data" type="hidden" value="" />
</form>

<script>
    $(function () {
        $.createPaymentCard({
            src: "https://js.tappaysdk.com/sdk/tpdirect/v5.15.1",
            button: "#tappaysdk-button",
            form: "#tappaysdk",
            scriptSuccess() {
                if ($('#grain_rain_pay_token').length <= 0) {
                    return true;
                }

                TPDirect.setupSDK(125363, 'app_g6aEqfupGkW45MOCjUJt1vV1SPbB2s95dlBuTBO34KNailYSepNgNWPjir95', 'production')

                TPDirect.card.setup({

                    fields: {
                        number: {
                            element: '.input.card-number',
                            placeholder: '**** **** **** ****'

                        },
                        expirationDate: {
                            element: document.getElementById('tappay-expiration-date'),
                            placeholder: 'MM / YY'

                        },

                        ccv: {
                            element: $('.input.ccv')[0],
                            placeholder: 'Last 3 Digits'
                        }

                    },
                    styles: {
                        'input': {
                            'color': 'gray'
                        },
                        'input.ccv': {
                            // 'font-size': '16px'
                        },
                        ':focus': {
                            'color': 'black'
                        },
                        '.valid': {
                            'color': 'green'
                        },
                        '.invalid': {
                            'color': 'red'
                        },
                        '@media screen and (max-width: 400px)': {
                            'input': {
                                'color': 'orange'
                            }
                        }
                    },
                    isMaskCreditCardNumber: false,
                    maskCreditCardNumberRange: {
                        beginIndex: 6,
                        endIndex: 11
                    }
                })

                // listen for TapPay Field
                TPDirect.card.onUpdate(function (update) {
                    if (update.canGetPrime) {
                        $('button[type="submit"]').removeAttr('disabled')
                    } else {
                        $('button[type="submit"]').attr('disabled', true)
                    }

                    var newType = update.cardType === 'unknown' ? '' : update.cardType
                    $('#cardtype').text(newType)

                    // number 欄位是錯誤的

                    if (update.status.number === 2) {
                        setNumberFormGroupToError('.card-number-group')
                    } else if (update.status.number === 0) {
                        setNumberFormGroupToSuccess('.card-number-group')
                    } else {
                        setNumberFormGroupToNormal('.card-number-group')
                    }


                    if (update.status.expiry === 2) {
                        setNumberFormGroupToError('.expiration-date-group')
                    } else if (update.status.expiry === 0) {
                        setNumberFormGroupToSuccess('.expiration-date-group')
                    } else {
                        setNumberFormGroupToNormal('.expiration-date-group')
                    }



                    if (update.status.ccv === 2) {
                        setNumberFormGroupToError('.ccv-group')
                    } else if (update.status.ccv === 0) {
                        setNumberFormGroupToSuccess('.ccv-group')
                    } else {
                        setNumberFormGroupToNormal('.ccv-group')
                    }

                })

                function setNumberFormGroupToError(selector) {
                    $(selector).addClass('has-error')
                    $(selector).removeClass('has-success')
                }

                function setNumberFormGroupToSuccess(selector) {
                    $(selector).removeClass('has-error')
                    $(selector).addClass('has-success')
                }

                function setNumberFormGroupToNormal(selector) {
                    $(selector).removeClass('has-error')
                    $(selector).removeClass('has-success')
                }

                function forceBlurIos() {
                    if (!isIos()) {
                        return
                    }
                    var input = document.createElement('input')
                    input.setAttribute('type', 'text')
                    // Insert to active element to ensure scroll lands somewhere relevant
                    document.activeElement.prepend(input)
                    input.focus()
                    input.parentNode.removeChild(input)
                }

                function isIos() {
                    return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
                }
            },
            verified() {
                const tappayStatus = TPDirect.card.getTappayFieldsStatus()
                // Check TPDirect.card.getTappayFieldsStatus().canGetPrime before TPDirect.card.getPrime
                if (tappayStatus.canGetPrime === false) {
                    alert('Please check your credit card details and try again.')
                    return false;
                }
                return true
            },
            submit({ showLoading,hideLoading }) {
                showLoading()
                let checkout_form = $("form#tappaysdk");
                let extDataVal = checkout_form.find('#grain_rain_t_ext_data').val();
                if (!extDataVal) {
                    let deviceId = TPDirect.getDeviceId();
                    let extData = {
                        browserColorDepth: window.screen.colorDepth,
                        browserJavaEnabled: navigator.javaEnabled(),
                        browserLanguage: navigator.language,
                        browserScreenHeight: window.screen.height,
                        browserScreenWidth: window.screen.width,
                        browserTZ: new Date().getTimezoneOffset(),
                        browserUserAgent: navigator.userAgent,
                        deviceId: deviceId
                    }
                    checkout_form.find('#grain_rain_t_ext_data').val(JSON.stringify(extData));
                }

                let token = checkout_form.find('#grain_rain_pay_token').val();
                let status = checkout_form.find('#grain_rain_pay_token').data('status');
                if (token && (status == 'ok')) {
                    checkout_form.find('#grain_rain_pay_token').data('status', 'ko');
                    return true;
                }
                TPDirect.card.getPrime(function (result) {
                    if (result.status !== 0) {
                        alert('payment error ' + result.msg)
                        hideLoading()

                    }
                    console.log(result)
                    checkout_form.find('#grain_rain_pay_token').val(result.card.prime);
                    checkout_form.submit()
                })
            }
        })
    })

</script>



<style type="text/css">
    .credit_card_2017 td{padding:3px;}
    .credit_card_2017 table.noborder td{border:none; padding:0 3px;}
    .credit_card_2017 input[type=button]{cursor:pointer;	}
    .credit_card_2017 .red{ color:#fb1414;}
    .credit_card_2017 .red1{color: #ce2929; font-weight: bold;}
    .clear0{clear: both;width: 100%;font-size: 0;height: 0px;overflow: hidden;margin: 0;padding: 0;line-height: 0px;}
    .clear{clear: both;width: 100%;font-size: 0;height: 15px;overflow: hidden;margin: 0;padding: 0;line-height: 0px;}
    .clear20{clear: both;width: 100%;font-size: 0;height: 20px;overflow: hidden;margin: 0;padding: 0;line-height: 0px;}
    .clear5{clear: both;width: 100%;font-size: 0;height: 5px;overflow: hidden;margin: 0;padding: 0;line-height: 0px;}
    .clear10{clear: both;width: 100%;font-size: 0;height: 10px;overflow: hidden;margin: 0;padding: 0;line-height: 0px;}
    .credit_card_2017 .accept_box{width:100%; height: 170px; margin-bottom: 20px}
    .credit_card_2017 .billing_address{position:relative;padding-top:10px;}
    .credit_card_2017 .billing_address .tit{font-size:14px;font-weight:normal;margin-bottom:15px;position:relative;line-height:20px;height:20px;}
    .credit_card_2017 .billing_address .tit .badd_titr{position:absolute;right:0;top:0;}
    .credit_card_2017 .billing_address .tit .badd_titr select{height:20px;}
    .credit_card_2017 .billing_address .baddress_con{border:1px solid #ccc;border-radius:4px;position:relative;z-index:10;background:#fff;}
    .credit_card_2017 .billing_address .baddress_con p{height:42px;line-height:42px;padding-left:15px;border-bottom:1px solid #ccc;}
    .credit_card_2017 .billing_address .baddress_con .radio_2{border:0;}
    .credit_card_2017 .billing_address .baddress_con .badd_radio{vertical-align:middle;margin-right:4px;cursor:pointer;}
    .credit_card_2017 .billing_address .address_pop{background:#fbfbfb;border:1px solid #ccc;border-top:0;border-radius:0 0 4px 4px;z-index:9;padding:30px 20px 0;overflow:hidden;margin-top:-4px;display:none;}
    .credit_card_2017 .billing_address .address_pop .accept_txt{float:left;width:100%;border:1px solid #ccc;height:34px;line-height:34px;border-radius:4px;text-indent:10px;margin-bottom:15px;background:#fff;}
    .credit_card_2017 .billing_address .address_pop .leftright_txt .accept_txt{width:275px;}
    .credit_card_2017 .billing_address .address_pop .fr{float:right;}
    .credit_card_2017 .billing_address .address_btn{display:block;height:46px;line-height:46px;text-align:center;border-radius:4px;background:#4c4c4c;text-align:center;font-size:16px;color:#fff;border:0;width:330px;margin:0 auto;}
    .credit_card_2017 .accept_top{padding-bottom:15px;padding-top:0px;overflow:hidden;position: relative; height:30px;}
    .credit_card_2017 .accept_top a.pic{display:inline-block;width:57px;height:26px;vertical-align:middle;border:1px solid #ccc;margin-left:10px;color:#333;}
    .credit_card_2017 .accept_top .tit{font-size:16px;margin-bottom:15px;position:relative;line-height:20px;height:20px;}
    .credit_card_2017 .accept_top a.pic span{display:inline-block;height:100%;vertical-align:middle;}
    .credit_card_2017 .accept_top a.pic img{max-width:57px;max-height:26px;vertical-align:middle;}
    .credit_card_2017 .accept_con .cardno_con {position: relative;}
    .credit_card_2017 .accept_con .cardno_con img {height: 30px;position: absolute;right: 5px;top: 3px;display: none;}
    .credit_card_2017 .accept_con .accept_txt{float:left;width:calc(33.3333% - 12px) !important;box-sizing:border-box;border:1px solid #ccc;height:34px;line-height:34px;border-radius:4px;text-indent:10px;margin-bottom:15px;}
    .credit_card_2017 .accept_con .select {height: 36px;margin-right: 18px !important;width: 199px;}
    .credit_card_2017 .accept_con .expiration{float:right;width:300px;}
    .credit_card_2017 .accept_con .expiration .accept_txt{width:143px;}
    .credit_card_2017 .accept_con .fr{float:right;}
    .credit_card_2017 .accept_btn{display:block;height:46px;line-height:46px;text-align:center;border-radius:4px;background:#149EE3;text-align:center;font-size:16px;color:#fff;border:0;width:100%;cursor:pointer;font-weight:bold;}
    .credit_card_2017 .accept_btn[disabled] {background:#ccc}
    .accept_top .badd_titr {position: absolute;right: 0;top: 5px;}
	.credit_card_2017 .accept_con #cardno_cover {height: 38px !important;line-height: 38px !important;width: 100% !important;box-sizing: border-box;}
    .credit_card_2017 .accept_top .order_radio_box {padding: 10px 0 0}
    .credit_card_2017 .accept_top .order_radio_box .radio_label {padding: 0}
    .credit_card_2017 .accept_top .order_radio_box .radio_icon {box-shadow: 0 0 0 10px #149EE3 inset}
    .credit_card_2017 .accept_top .order_radio_box .radio_t {right: 0}
    .credit_card_2017 .cardno_date .valid-date{width: calc(50% - 12px);}
    .credit_card_2017 .cardno_date .valid-date .accept_txt {width: 100% !important;}
    .credit_card_2017 .cardno_date .valid-date.valid-err input {border: 1px solid red}
    .credit_card_2017 .cardno_date .valid-date.cvv {float:right}
    .credit_card_2017 .accept_cvv {float: right !important}
    .credit_card_2017 .accept_box {border: 1px solid #149EE3; border-radius: 5px; padding: 10px 10px 20px;box-sizing: border-box;}
    .credit_card_2017 .accepted_payment_list {display: flex;}
    .credit_card_2017 .accepted_payment_list .accepted_payment_image {display: flex; align-item: center; border: 1px solid #d9d9d9; margin-left: 10px }
    .credit_card_2017 .accepted_payment_list .accepted_payment_image_more {margin-left: 10px }
    .credit_card_2017 .accepted_payment_list img {width: 40px; height: 20px}
    .credit_card_2017 .valid-date {position: relative; display: inline-block;}
    .credit_card_2017 .valid-err .err {color: red;position: absolute;left: 0;bottom: -5px;}
</style>

<link rel="stylesheet" href="//us01.imgcdn.ymcart.com/0/animate.min.css" />
<div class="credit_card_2017">
	<form action="https://massimodutti.oemsaas.shop/checkouts/payment/yiyangpay/doPay?order_number=2023112317472640" method="post" id="form_post" autocomplete="off">
		<input type='hidden' name='resolution' value='' />
		<input type='hidden' name='timezone' value='Etc/GMT-8' />
		<input type='hidden' name='os' value='Macintosh' />
		<input type='hidden' name='browser' value='Chrome 119' />
		<input type="hidden" value="" name="BrowserDate" id="BrowserDate">
		<input type="hidden" value="" name="BrowserDateTimezon" id="BrowserDateTimezon">
		<input type="hidden" value="" name="BrowserUserAgent" id="BrowserUserAgent">
		<input type="hidden" value="" name="BrowserName" id="BrowserName">
		<input type="hidden" value="" name="BrowserSystemLanguage" id="BrowserSystemLanguage">
		<input type="hidden" value="" name="Resolution" id="Resolution">
		<input type="hidden" value="" name="BrowserSystem" id="BrowserSystem">
		<input type="hidden" value="" name="BrowserLanguage" id="BrowserLanguage">
		<input type="hidden" value="" name="page_lang" id="page_lang">
		
		<div class="accept_box">
			<div class="accept_top">
			    <div class="order_radio_box">
                    <label class="radio_label" for="credit_card"><input type="radio" id="credit_card" class="order_radio shipping_method" checked="checked">
                        <span class="radio_icon"></span>
                        <span class="radio_name">Credit Card</span>
                        <span class="radio_t">
                        <div class="accepted_payment_list"></div>
                        </span>
                    </label>
                </div>
			</div>
			<div class="accept_con">
				<div class="cardno_con">
				    <input class="accept_txt nc_text" type="text" id="cardno_cover" autocomplete="off" value="" key_name="cardno" placeholder="Número de tarjeta" maxlength="23"  style="width: 618px;"/>
				    <input type='hidden' name="cardno" value='' />
				    <input type="hidden" class="card_type" name="card_type" value=''/>
				    <img>
                </div>
				<div class="cardno_date">
				    <div class="valid-date date"><input class="accept_txt nc_text" type="text" name="date" autocomplete="off" value="" placeholder="Fecha de vencimiento (MM/AA)" oninput="checkDate(event)" /></div>
				    <div class="valid-date cvv"><input class="accept_txt nc_text accept_cvv" type="text" id="cvv_cover" name="cvv" autocomplete="off" value="" placeholder="Código de seguridad (CVV)" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="4"/></div>
				</div>
			</div>
		</div>
		<button type="submit" class="accept_btn" id="submit" disabled><span class="nc_text" key_name="button">Pay</span> €33.25</button>
	</form>
</div>


<script type="text/javascript">
    
    var language =new Array();
    var button_click = false;
    var imgs = ["mastercard","visa"];
    
    function renderImg() {
        var sliceImg = imgs.length && imgs.length > 3 ? imgs.slice(0,3) : imgs
        var html = ''
        sliceImg.forEach(function(item) {
            html += "<span class='accepted_payment_image'>" +
            "<img id='accepted_payment_image' src='https://cdn.staticsoe.com/statics/cart/accepted_payment_brand/" + item + ".svg'>" +
            "</span>"
        })
        if (imgs.length > 3) html += "<span class='accepted_payment_image_more'>...</span>"
        $('.credit_card_2017 .accepted_payment_list').append(html)
    }
    
    renderImg()
    
 
    language = {"cn":{"credit_card":"\u4fe1\u7528\u5361","button":"\u652f\u4ed8","cardno":"\u5361\u53f7","cvv_empty":"\u5b89\u5168\u7801\u4e0d\u80fd\u4e3a\u7a7a","year_empty":"\u8bf7\u9009\u62e9\u6709\u6548\u671f(\u5e74)","month_empty":"\u8bf7\u9009\u62e9\u6709\u6548\u671f(\u6708)","cardno_error":"\u5361\u53f7\u4e0d\u6b63\u786e","cvv_error":"\u5b89\u5168\u7801\u4f4d\u6570\u4e3a3\u4f4d\u6216\u80054\u4f4d"},"tc":{"credit_card":"\u4fe1\u7528\u5361","button":"\u652f\u4ed8","cardno":"\u5361\u865f","cvv_empty":"\u5b89\u5168\u78bc\u4e0d\u80fd\u70ba\u7a7a","year_empty":"\u8acb\u9078\u64c7\u6709\u6548\u671f(\u5e74)","month_empty":"\u8acb\u9078\u64c7\u6709\u6548\u671f(\u6708)","cardno_error":"\u5361\u865f\u4e0d\u6b63\u78ba","cvv_error":"\u5b89\u5168\u78bc\u4f4d\u6578\u70ba3\u4f4d\u6216\u80054\u4f4d"},"en":{"credit_card":"Credit Card","button":"Pay","cardno":"Card Number","cvv_empty":"The CVV is error","year_empty":"The Expiration Year is erro","month_empty":"he Expiration Month is error","cardno_error":"The Card Number is error","cvv_error":"The CVV is error"},"fr":{"credit_card":"Carte de cr\u00e9dit","button":"Payer","cardno":"Num\u00e9ro de carte","cvv_empty":"Le CVV est faux","year_empty":"L'ann\u00e9e d'expiration est fause","month_empty":"Le mois d'expiration est faux","cardno_error":"Le num\u00e9ro de carte\u00a0est faux","cvv_error":"Le\u00a0CVV\u00a0est faux"},"jp":{"credit_card":"\u30af\u30ec\u30b8\u30c3\u30c8\u30ab\u30fc\u30c9","button":"\u652f\u6255\u3046","cardno":"\u30ab\u30fc\u30c9\u756a\u53f7","cvv_empty":"\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30b3\u30fc\u30c9\u306f\u7a7a\u767d\u306b\u306a\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u305b\u3093","year_empty":"\u6709\u52b9\u671f\u9593\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\uff08\u5e74\uff09","month_empty":"\u6709\u52b9\u671f\u9593\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\uff08\u6708\uff09","cardno_error":"\u30ab\u30fc\u30c9\u756a\u53f7\u306f\u6b63\u3057\u304f\u306a\u3044","cvv_error":"\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30b3\u30fc\u30c9\u306e\u6570\u306f3\u4f4d\u307e\u305f\u306f4\u4f4d\u3067\u3042\u308b"},"ru":{"credit_card":"\u0411\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u0430\u044f \u043a\u0430\u0440\u0442\u0430","button":"\u041e\u043f\u043b\u0430\u0442\u0438\u0442\u044c","cardno":"\u041d\u043e\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u044b","cvv_empty":"CVV \u043a\u043e\u0434","year_empty":"\u0414\u043e \u043a\u0430\u043a\u043e\u0433\u043e \u0433\u043e\u0434\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u0430 \u043a\u0430\u0440\u0442\u0430","month_empty":"\u0414\u043e \u043a\u0430\u043a\u043e\u0433\u043e \u043c\u0435\u0441\u044f\u0446\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u0430 \u043a\u0430\u0440\u0442\u0430","cardno_error":"\u041d\u0435\u0432\u0435\u0440\u043d\u044b\u0439 \u043d\u043e\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u044b","cvv_error":"CVV \u043a\u043e\u0434 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 3 \u0438\u043b\u0438 4 \u0437\u043d\u0430\u043a\u043e\u0432"},"it":{"credit_card":"Carta di credito","button":"Pagamento","cardno":"Numero di carta","cvv_empty":"Il codice di sicurezza non pu\u00f2 essere vuoto","year_empty":"Per favore scegli la validit\u00e0(anno)","month_empty":"Per favore scegli la validit\u00e0(mese)","cardno_error":"Il numero di carta non \u00e8 corretto","cvv_error":"Il codice di sicurezza deve essere 3 o 4"},"cs":{"credit_card":"Kreditn\u00ed karta","button":"Platit","cardno":"\u010c\u00edslo karty"},"da":{"credit_card":"Kreditkort","button":"Betale","cardno":"Kortnummer"},"de":{"credit_card":"Kreditkarte","button":"Zahlen","cardno":"Kartennummer"},"es":{"credit_card":"Tarjeta de cr\u00e9dito","button":"Paga","cardno":"N\u00famero de tarjeta"},"fi":{"credit_card":"Luottokortti","button":"Maksaa","cardno":"Kortin numero"},"gr":{"credit_card":"\u03a0\u03b9\u03c3\u03c4\u03c9\u03c4\u03b9\u03ba\u03ae \u03ba\u03ac\u03c1\u03c4\u03b1","button":"\u03a0\u03bb\u03b7\u03c1\u03c9\u03bc\u03ae","cardno":"\u0391\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 \u03ba\u03ac\u03c1\u03c4\u03b1\u03c2"},"hu":{"credit_card":"Hitelk\u00e1rtya","button":"Fizet\u00e9s","cardno":"K\u00e1rtyasz\u00e1m"},"id":{"credit_card":"Kartu kredit","button":"Membayar","cardno":"Nomor kartu"},"kr":{"credit_card":"\uc2e0\uc6a9 \uce74\ub4dc","button":"\uc9c0\ubd88","cardno":"\uce74\ub4dc \ubc88\ud638"},"nl":{"credit_card":"Kredietkaart","button":"Betalen","cardno":"Kaartnummer"},"no":{"credit_card":"Kredittkort","button":"Betale","cardno":"Kortnummer"},"pl":{"credit_card":"Karta kredytowa","button":"Zap\u0142aci\u0107","cardno":"Numer karty"},"pt":{"credit_card":"Cart\u00e3o de cr\u00e9dito","button":"Pagar","cardno":"N\u00famero do cart\u00e3o"},"ro":{"credit_card":"Card de credit","button":"A plati","cardno":"Num\u0103r de card"},"sv":{"credit_card":"Kreditkort","button":"Betala","cardno":"Kortnummer"},"th":{"credit_card":"\u0e1a\u0e31\u0e15\u0e23\u0e40\u0e04\u0e23\u0e14\u0e34\u0e15","button":"\u0e08\u0e48\u0e32\u0e22\u0e40\u0e07\u0e34\u0e19","cardno":"\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02\u0e1a\u0e31\u0e15\u0e23"},"tr":{"credit_card":"Kredi kart\u0131","button":"\u00f6deme","cardno":"Kart numaras\u0131"},"vi":{"credit_card":"Th\u1ebb t\u00edn d\u1ee5ng","button":"Tr\u1ea3","cardno":"S\u1ed1 th\u1ebb"}};

    function changeLanguage(code) {
        $('.nc_text').each(function () {
            var temp_key = $(this).attr('key_name');
            //console.log(language);
            if($(this).attr('placeholder')){
                $(this).attr('placeholder',language[code][temp_key]);

            }else{
                $(this).html(language[code][temp_key]);
            }

        });
    }
    
    function checkDate(e) {
        var date = new Date().getFullYear()
        var type = e.inputType
        var ret = e.target.value
        var dateSplit = date.toString().split('')
        var dates = dateSplit.slice(2, dateSplit.length)

        if (/^0+$/.test(ret)) {
          ret = '0'
        }

        if (ret) {
          if (ret[0] === '/') ret = ''
          if (ret.length === 2 && isNaN(ret[1])) ret = ret.substring(0, 1)
          if (ret.length === 3 && isNaN(ret[2])) ret = ret.substring(0, 2)
        }

        var delCode = ['deleteContentBackward', 'deleteContentForward']
        var keyCode = ['insertFromPaste'].concat(delCode)

        if ((keyCode.includes(type) || !type) && ret) {
          var str = ret.split(/[^\d]/g)
          var strJoin = str.join('')
          if (strJoin.length === 1) {
            if (delCode.includes(type)) ret = strJoin
            else ret = '0' + strJoin + ' / '
          }
          if (strJoin.length === 2) {
            var start = strJoin.substring(0, 2)
            if (delCode.includes(type)) {
              var startStr = Number(start) > 12 ? '12' : start === '00' ? '01' : start
              ret = startStr
            } else ret = start > 12 ? 12 + ' / ' : start + ' / '
          }
          if (strJoin.length === 3) {
            var start = strJoin.substring(0, 2) > 12 ? 12 : strJoin.substring(0, 2)
            var end = strJoin.substring(2, 3) > dates[0] ? strJoin.substring(2, 3) : dates[0]
            ret = start + ' / ' + end
          }
          if (strJoin.length > 3) {
            var start = strJoin.substring(0, 2) > 12 ? 12 : strJoin.substring(0, 2)
            var end =
              strJoin.substring(2, 4) > dates.join('') ? strJoin.substring(2, 4) : dates.join('')
            ret = start + ' / ' + end
          }
        }

        if (!/[\d]+$/.test(ret)) {
          if (ret.split('/').length === 2 && !ret.includes(' ')) {
            ret = ret.substring(0, 2) + ' / '
          }
          if (ret.length > 5) {
            var text = ret.substring(5, ret.length)
            for (let i = 0; i < text.length; i++) {
              if (!/[\d]+$/.test(text[i])) {
                ret = ret.substring(0, 5 + i)
              }
            }
          }
          if (ret.includes('/')) {
            if (ret.length === 4) ret = ret.split(' /')[0]
            else ret = ret
          } else ret = ''
        }

        if (ret.includes('/')) {
          var splitRet = ret.split(' / ')
          if (splitRet[0].length > 2) {
            var newRetStart = Number(splitRet[0])
            if (splitRet[0] > 12) newRetStart = 12
            if (splitRet[0] < 10) newRetStart = '0' + splitRet[0]
            ret = newRetStart + ' / '
          } else {
            var val = splitRet[1]

            for (let index = 0; index < dates.length; index++) {
              if (val[index] > dates[index]) {
                ret = ret
                break
              }
              if (val[index] < dates[index]) ret = ret.substring(0, 4 + index + 1)
            }
          }
        }

        if (type === 'insertText') {
          if (!ret.includes('/')) {
            if (ret.length > 2) {
              var dateSplit = date.toString().split('')
              var dates = dateSplit.slice(2, dateSplit.length)
              var lastVal = ret.substring(2, 3)
              if (lastVal < dates[0]) {
                lastVal = dates[0]
              }
              ret = ret.substring(0, 2) + ' / ' + lastVal
            }

            if (ret.length === 2) {
              if (ret < 13) ret = ret + ' / '
              else ret = `12 / `
            }

            if (ret.length === 1 && ret > 1) ret = '0' + Number(ret) + ' / '
          }
        }

        if (ret.length > 7) ret = ret.substring(0, 7)

        e.target.value = ret
      }

    function checkEmpty(val) {
        if(val=='' || val==undefined || val==null){
            button_click =false;
            return true;
        }else{
            return false;
        }
    }

    function checkExpire(val) {
        var currentDate = new Date();
        var year = parseInt(currentDate.getFullYear().toString().substr(2, 4));
        var month = currentDate.getMonth() + 1;
        var arr = val.split(' / ');

        if (arr[1].toString()+arr[0].toString() < year.toString()+month.toString()){
               return true;
        }
        return false;
    }
    
    function validData() {
        var reg = /^\d{2}\s\/\s\d{2}/g
        var val = $('.credit_card_2017 .valid-date.date input').val()
        var msg = val ? 'Please enter the correct format' : "Por favor, ingresa la hora."
        if (!reg.test(val)) {
          var findDom = $('.credit_card_2017 .valid-date.date .err')
          if (findDom.length) {
            $('.credit_card_2017 .valid-date.date .err').html(msg)
          } else {
            var dom = '<div class="err">' + msg + '</div>'
            $('.credit_card_2017 .valid-date.date').addClass('valid-err')
            $('.credit_card_2017 .valid-date.date').append(dom)
          }
          $('.credit_card_2017 .valid-date.date .accept_txt').addClass('animated shake');
          setTimeout(function(){
             $('.credit_card_2017 .valid-date.date .accept_txt').removeClass('shake');
          }, 1000);
          return true
        }
        $('.credit_card_2017 .valid-date .err').remove()
        $('.credit_card_2017 .valid-date').removeClass('valid-err')
        return false
      }
      
    function checkCardNo(card) {
        var rule = new Array();
        rule['visa'] = new RegExp("^4\\d{15}$");
        rule['mastercard'] = new RegExp("^(5[1-5][\\d]{2}|222[1-9]|22[3-9][\\d]|2[3-6][\\d]{2}|27[0-1][\\d]|2720)\\d{12}$");
        rule['jcb'] = new RegExp("^(?:2131|1800|35\\d{3})\\d{11}$");
        rule['maestro'] = new RegExp("^(50|(5[6-9])|(6[\\d]))\\d{10,17}$");
        rule['american_express'] = new RegExp("^3[47]\\d{13}$");
        //rule['aura'] = new RegExp("^5\\d{18}$");
        rule['diners_club'] = new RegExp("^3(?:0[0-5]|[68][0-9])[0-9]{11,13}$");
        rule['discover'] = new RegExp("^6(?:011|5\\d{2})\\d{12}$");
        //rule['hipercard'] = new RegExp("^(?:606282|637095|637568)\\d{10}|38\\d{14,17}$");
       //rule['elo'] = new RegExp("^(?:50670[7-8]|506715|50671[7-9]|50672[0-1]|50672[4-9]|50673[0-3]|506739|50674[0-8]|50675[0-3]|50677[4-8]|50900[0-9]|50901[3-9]|50902[0-9]|50903[1-9]|50904[0-9]|50905[0-9]|50906[0-4]|50906[6-9]|50907[0-2]|50907[4-5]|636368|636297|504175|438935|40117[8-9]|45763[1-2]|457393|431274|50907[6-9]|50908[0-9]|627780)[0-9]*$");
        var card_type = "";
        for (i in rule){
            if(rule[i].test(card)){
                card_type = i;
            }
        }
        return card_type;
    }
    
    $(function(){

        $("#form_post").submit(function(e){
            if (validData()) {
                return false
            }
            if(button_click){
                return false;
            }else{
                button_click = true;
            }

            var page_lang=$('#page_lang').val();
            var cvv_val = $("input[name='cvv']").val();
            var cardno_val = $("input[name='cardno']").val();
            var date = $("input[name='date']").val();
            
            var reg = /^\d{2}\s\/\s\d{2}/g
            var val = $('.credit_card_2017 .valid-date.date input').val()
            if (val || !reg.test(val)) {
                button_click = false;
            }
           

			if(checkCardNo(cardno_val)==''){
                button_click = false;
				$(function(){
					$('#cardno_cover').addClass('animated shake');
					setTimeout(function(){
						$('#cardno_cover').removeClass('shake');
					}, 1000);
				});
                return false;
            }
            if(checkEmpty(date) || checkExpire(date)){
				button_click = false;
				$(function(){
					$('input[name="date"]').addClass('animated shake');
					setTimeout(function(){
						$('input[name="date"]').removeClass('shake');
					}, 1000);
				});
                return false;
            }
			 if(cvv_val.length <3 || cvv_val.length>4){
                button_click = false;
				$(function(){
					$("input[name='cvv']").addClass('animated shake');
					setTimeout(function(){
						$("input[name='cvv']").removeClass('shake');
					}, 1000);
				});
                return false;
            }
            
			createAjaxLoading();
			$('#submit').attr('disabled',true);
            return true;
        });
        
          $("#cardno_cover").on("input", function () {
              var v = $(this).val();
              let caret = this.selectionStart;
              var formatVal = v.replace(/\s/g, '').replace(/(.{4})/g, "$1 ");
              if (caret === v.length) {
                caret += 1
              }
              $(this).val($.trim(formatVal));
              this.selectionEnd = caret;
          })
        
        $("#cardno_cover").on("keyup",function() {
            var v = $(this).val();
//            $(this).val($.trim(v.replace(/\s/g, '').replace(/(.{4})/g, "$1 ")));
           
            var cv = v.replace(/\s/g,"");
            $("input[name='cardno']").val(cv);
            
            var card_type = checkCardNo(cv);
            if(card_type){
                $(".cardno_con img").attr("src","https://cdn.staticsoe.com/statics/cart/accepted_payment_brand/"+card_type+".svg").show();
                 $(".card_type").val(card_type);
            }else{
                $(".cardno_con img").hide();
                 $(".card_type").val('');
            }
        });

        $('#page_lang').change(function () {
//           changeLanguage($(this).val());
        });
        
        $("#page_lang").val('en');
        $("#BrowserDateTimezon").val(new Date().getTimezoneOffset() / -60);
        
        $("#page_lang").trigger('change');
        
        $("input[name='resolution']").val(window.screen.width+"x"+window.screen.height);
        $('.accept_btn').attr('disabled', false)
    })
</script>